<template>
  <div v-if="!deleted" class="content-item">
    <div class="item-img">
      <img :src="content.imageUrl">
    </div>
    <div class="item-info">
      <div class="title">
        <span>{{content.title}}</span>
      </div>
      <div class="detail">
        <span>{{contentType}} {{content.publishTime | date('yyyy-MM-dd HH:mm')}} {{contentStatus}}</span>
        <span class="try" v-if="content.previewAllowed==1">试读</span>
      </div>
      <div class="playTimes">
        <span>阅读:{{content.playAmount}} | 点赞:{{content.voteAmount}}</span>
      </div>
      <div class="operation-group">
        <div class="operation-btn" @click="editItem">
          <span class="icon iconfont">&#xe630;</span>
          <span>修改</span>
        </div>
        <div class="operation-btn" @click="deleteItem">
          <span class="icon iconfont">&#xe600;</span>
          <span>删除</span>
        </div>
        <div class="operation-btn" @click="viewItem">
          <span class="icon iconfont">&#xe621;</span>
          <span>预览</span>
        </div>
        <div class="operation-btn" @click="showComment">
          <span class="icon iconfont">&#xe8f7;</span>
          <span>{{content.commentAmount}}</span>
        </div>
      </div>
    </div>
    <comment v-if="toggleComment" :id="content.id"></comment>
  </div>
</template>

<script>
import Comment from "./Comment.vue";

export default {
  name: 'contentItem',
  props:["content"],
  components:{
    "comment":Comment
  },
  data(){
    return {
      toggleComment:false,
      deleted:false
    }
  },
  created() {
    this.$watch("content",()=>{//重置留言展开状态
      this.toggleComment = false;
    });
  },
  computed: {
    contentType() {
      let typeMap = {
        2:"视频",
        6:"音频",
        4:"文章",
        5:"图集"
      };

      return typeMap[this.content.contentType];
    },
    contentStatus() {
      let typeMap = {
        0:"草稿",
        1:"未发布",
        2:"已发布",
        6:"废弃",
        8:"转码中",
        9:"下线",
        12:"转码失败"
      };

      return typeMap[this.content.status];
    },
    specialColumnId() {
      return this.$store.state.content.specialColumnId;
    },
    coursePacketId() {
      return this.$store.state.content.coursePacketId;
    }
  },
  methods: {
    editItem(){
      const id = this.content.id;
      const contentTypeMap = {
        2:"video",
        6:"audio",
        4:"article",
        5:"photoview"
      };

      const apiName = contentTypeMap[this.content.contentType] + "LoadInfo";
      this.$store.dispatch(apiName, id).then((res) => {
        let data = res.data;

        if(this.content.contentType == 4){//文章类型
          let formData = {
            id: id,
            title: null,
            description:null,
            content:null,
            imageUrl: this.content.imgUrl,
            previewAllowed: 0
          };

          for (let key in formData) {
            if (formData.hasOwnProperty(key) && data[key]) {
              formData[key] = data[key];
            }
          }

          this.$store.dispatch('articleSetTempData', formData);
        }else{//视频、音频类型
          if (!data.rid) {
            alert('视频转码中，请稍后尝试~');
            return;
          }
          let formData = {
            id: id,
            coursePacketId: null,
            specialColumnId:null,
            rid:null,
            title: null,
            description: null,
            imageUrl: this.content.imgUrl,
            previewAllowed: 0,
            status:null
          };

          formData.rid = data.rid;
          formData.type = contentTypeMap[this.content.contentType];
          for (let key in formData) {
            if (formData.hasOwnProperty(key) && data[key]) {
              formData[key] = data[key];
            }
          }

          this.$store.dispatch('mediaClearTempData');
          this.$store.dispatch('videoSetTempData', formData);
          this.$store.dispatch('videoEndUpload', 'uploaded');
        }

        this.$router.push(`/columns/journal/${this.specialColumnId}/${this.coursePacketId}/publish/${contentTypeMap[this.content.contentType]}`);
      }, ()=> {
        alert('抱歉，获取视频信息失败>_<')
      });
    },
    deleteItem(){
      const id = this.content.id;

      this.$store.dispatch('confirm', '是否确定删除？').then(() => {
        this.$store.dispatch('deleteArticle', id).then((res)=>{
          if(res.code===200){
            this.deleted=true;
          }
          else {
            res.message?alert(res.message):alert('抱歉，删除失败>_<')
          }
        },(res)=>{
          res.message?alert(res.message):alert('抱歉，删除失败>_<')
        }); // 先写个本地删除放着。。。
        this.$emit('deleteclick', this.content)
      }, () => {})
    },
    viewItem(){
      let viewWidth = 900,
        viewHeight = 800;

      let offsetLeft = (window.screen.availWidth - viewWidth)/2,
          offsetTop = (window.screen.availHeight - 30 - viewHeight)/2;
      window.open("http://"+this.content.pageUrl,"",`height=${viewHeight},width=${viewWidth},top=${offsetTop},left=${offsetLeft},status=no,toolbar=no,menubar=no,location=no`);

    },
    showComment(){
      this.toggleComment = !this.toggleComment;
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less">
.content-item{
  width: 100%;
  //height: 190px;
  padding: 15px 10px;
  box-sizing:border-box;
  border-bottom: 1px solid #ddd;
  .item-info{
    overflow: hidden;
    .title{
      font-size: 28px;
      margin-bottom: 15px;
      line-height: 150%;
    }
    .detail,.playTimes{
      font-size: 16px;
      color: #888;
      line-height: 200%;
      .try{
        color: #2e9057;
      }
    }
    .operation-group{
      margin-top:10px;
      .operation-btn{
        color: #333;
        font-size: 18px;
        line-height: 180%;
        cursor: pointer;
        display: inline-block;
        margin-right: 10px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        .icon{
          font-size: 20px;
        }
      }
    }
  }
  .item-img{
    float: right;
    width: 230px;
    height: 150px;
    overflow: hidden;
    margin-left: 20px;
    img{
      width: 100%;
    }
  }
}
</style>
